<template>
	<div class="system-role">
		<div class="top">
			<Row :gutter="10">
				<Col :span="4">
					<Input v-model="keyWord" placeholder="姓名/手机号码" />
				</Col>
                <Col :span="4">
                    <div>
                        <Button class="ml20" type="primary" @click="search">查询</Button>
					    <Button class="ml20" type="default" plain @click="reset">清空</Button>
                    </div>
				</Col>
                <Col :span="16" align="right">
                    <Button type="primary" @click="showDrawer=true;">新增员工</Button>
				</Col>
			</Row>
		</div>

		<Drawer :title="alertTitle" v-model="showDrawer" :width="720" :mask-closable="false">
			<Form ref="form" :rules="rules" :model="editedItem" :label-width="80">
				<Row :gutter="32">
					<Col :span="24">
						<FormItem label="姓名" label-position="left" prop="">
							<Input  v-model="editedItem.username" placeholder="" />
						</FormItem>
                        <FormItem label="性别" label-position="left" prop="sex">
							<RadioGroup class="sex" v-model.number="editedItem.sex">
                                <Radio style="margin-right:20px;" v-for="(item,i) in GLOBAL.sexOptionList" :key="i" :label="Number(item.value)">{{item.text}}</Radio>
                            </RadioGroup>
						</FormItem>
                        <FormItem label="手机号码" label-position="left" prop="mobile">
							<Input :maxlength="11" @on-change="e => {
                            const str = e.target.value;
                            const reg = /^1\d{10}$/;
                            if(str){
                                const arr = str.match(reg) || '';
                                (arr.length) ? this.editedItem.mobile = arr[0] : '';
                            }
                        }" :value="editedItem.mobile" placeholder="" />
						</FormItem>
                        <FormItem label="职位" label-position="left" prop="position">
							<Input  v-model="editedItem.position" placeholder="" />
						</FormItem>
                        <FormItem label="门店" label-position="left" prop="position">
                            <Select v-model="editedItem.organName"  placeholder="请选择门店">
                                <Option  class="select" v-for="item in organList" :value="item.organCode" :key="item.id">{{ item.organName }}</Option>
                            </Select>
						</FormItem>
                        
                        <FormItem label="备注" label-position="left" prop="remark">
							<Input  v-model="editedItem.remark" type="textarea" placeholder="" />
						</FormItem>
					</Col>
				</Row>
			</Form>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="close">取消</Button>
				<Button type="primary" :loading="editedIndex===-1?createLoading:updateLoading" @click="save">保存</Button>
			</div>
		</Drawer>
		<div>
			<div>
				<Table
					:loading="loading"
					highlight-row
					ref="currentRowTable"
					:columns="tableColumns"
					:data="items"
				>
					<template slot-scope="{ row }" slot="sex">
                        <span v-if="Number(row.sex)===1">男</span>
                        <span v-else-if="Number(row.sex)===2">女</span>
                        <span v-else>-</span>
					</template>
					<template slot-scope="{row}" slot="action">
						<Button v-if="row.rolename !== 'ADMIN'" type="primary" size="small" @click="update(row)">修改</Button>
						<Button
							v-if="row.rolename !== 'ADMIN'"
							class="ml10"
							type="primary"
							ghost
							size="small"
							@click="remove(row)"
						>删除</Button>
					</template>
				</Table>
                <Row class="pagination">
                    <Col align="right">
                        <Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
                    </Col>
                </Row>
			</div>
		</div>
	</div>
</template>
<script>
import { employeePageQueryList, employeeAdd, employeeUpdate, employeeDelete } from '@api/employee.js'
import { mapState } from '@lib/x_.js'

export default {
	data() {
		return {
            rules: {
                username: [{required: true, message: '请输入姓名', trigger: 'blur' }],
                sex: [{required: true, message: '请选择性别', trigger: 'blur' }],
                position: [{required: true, message: '请输入职位', trigger: 'blur' }],
                mobile: [{required: true, message: '请输手机号', trigger: 'blur' }],
                organName: [{required: true, message: '请选择机构', trigger: 'blur' }],
            },
            keyWord: "",
			showDrawer: false,
			showPermissionModal: false,
			loading: false,
			createLoading: false,
			updateLoading: false,
			removeLoading: false,
			editedIndex: -1,
			permissionIds: [],
			editedItem: {
				username: '',
				sex: 1,
				mobile: "",
				position: "",
				organName: "",
				remark: "",
			},
			defaultItem: {
				username: '',
				sex: 1,
				mobile: "",
				position: "",
				organName: "",
				remark: "",
			},
			items: [],
			page: 1,
			pageSize: 10,
			totalNum: 0,
			permissionList: [],
			tableColumns: [

// id: 1
// organId: 14
// projectCode: "14-0"
// username: "aaas"
// mobile: "13612815100"
// sex: 1
// position: "管理员"
// headimgurl: null
// status: 1
// remark: "pariatur culpa cupidatat adipisicing"
// createUserId: 2
// createTime: "2019-12-14 14:50:22"
// updateUserId: 2
// updateTime: "2019-12-14 14:50:22"
// organName: "科信康药店"

                {
                    width: 100,
					title: '序号',
                    key:'id',
                },
				{
                    width: 150,
					title: '姓名',
                    key:'username',
                },
                {
                    title: '性别',
                    width: 100,
                    slot:'sex',
                },
                {
                    title: '职位',
                    width: 150,
                    key:'position',
                },
                {
					title: '手机号码',
                    width: 150,
					key: 'mobile'
				},
				{
                    width: 150,
					title: '所属门店',
					key: 'organName'
                },
                
                {
                    width: 300,
                    title: '备注',
                    key:'remark',
                },
				{
                    title:'操作',
                    width: 200,
                    slot:'action'
                },
                {
                    title:' ',
                    key:''
                },
			]
		}
	},
	mounted() {
        this.employeePageQueryList()
        console.log('employeePageQueryList')
	},
	computed: {
		alertTitle() {
			return this.editedIndex === -1 ? '新增' : '修改'
        },
        ...mapState(['organList'])
	},
	methods: {
        search() {
            this.page = 1;
            this.pageSize = 10;
            this.employeePageQueryList()
        },
        reset() {
            this.page = 1;
            this.pageSize = 10;
            this.keyWord='';
        },
		pageChange(page) {
			if (this.loading) {
				return
			}
			this.page = page
			this.employeePageQueryList()
			console.log('page>', page)
		},
		async update(item) {
			const { id } = item
			this.editedIndex = item._index
			this.editedItem = Object.assign({}, item)
			this.showDrawer = true
		},
		create() {
			this.editedIndex = -1
			this.editedItem = Object.assign({}, this.defaultItem)
			this.showDrawer = true
		},
		remove(item, idx) {
			const {id, tagName } = item;
			this.removeLoading || (this.removeLoading = true)
			this.$Modal.confirm({
				title: '删除',
				content: `是否删除标签: ${tagName}?`,
				onOk: async () => {
                    const res = await employeeDelete({ key: itemKey, })
					this.removeLoading = false
					this.modal(res, '删除')
					this.employeePageQueryList()
				}
			})
		},
		async save() {
			console.log('this.$Modal-->', this.$Modal)
			if (this.editedIndex > -1) {
                console.log('update...')
				const {id, tagName } = this.editedItem
				this.updateLoading || (this.updateLoading = true)
				const res = await employeeUpdate({ id, tagName })
				this.updateLoading = false
				this.modal(res)
			} else {
				console.log('create...')
				this.createLoading || (this.createLoading = true)
                const res = await employeeAdd(this.editedItem)
                this.$store.dispatch('organPageQueryList')
				this.createLoading = false
				this.modal(res)
			}
			this.employeePageQueryList()
			this.close()
		},
		modal(res, title) {
            console.log('res-->', res)
            console.log('title-->', title)
			if (res.code === '0') {
				this.$Modal.success({
					title: title || this.alertTitle,
                    content: res.data,
				})
			} else {
				this.$Modal.warning({
					title: title || this.alertTitle,
                    content: res.errMsg,
				})
			}
		},
		close() {
			this.showDrawer = false
			setTimeout(() => {
				this.editedItem = Object.assign({}, this.defaultItem)
				this.editedIndex = -1
			}, 10)
        },
        employeePageQueryList() {
			const { page, pageSize, loading,keyWord } = this
			if (loading) return
			this.loading = true
			employeePageQueryList({
				page,
				pageSize
			})
				.then(res => {
					this.loading = false
					console.log('res roles->', res)
					if (res.code === '0') {
						const { currentPage, isMore, items, pageSize, totalNum, totalPage } = res.data
						;(this.items = items), (this.page = currentPage), (this.totalNum = totalNum)
						console.log('this.items->', this.items)
					} else {
                        this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
					    })
                    }
				})
				.catch(err => {
					this.loading = false
				})
		},
	},
	watch: {
		showDrawer(after) {
			after || this.close()
		}
	}
}
</script>
<style scoped>
.system-role {
	background-color: #fff;
}
</style>